<template>
  <div class="cardsheight">
    <div class="cardMuslim" v-for="(item, index) in mainList" :key="index">
      <div class="cardTitle">
        <div class="cardbg">
          <img v-if="item.restaurant_name === '营养餐厅'" :src="img1" alt>
          <img v-if="item.restaurant_name === '清真餐厅'" :src="img2" alt>
        </div>
        <span>{{item.menutitle}}</span>
        <span>{{item.create_time}}</span>
        <p v-if="item.status === 0">待支付</p>
        <p v-else-if="item.status === 1">已付款</p>
        <p v-else-if="item.status === 2">退款中</p>
        <p v-else-if="item.status === 3">已退款</p>
      </div>
      <div class="cardMenu">
        <div class="ul">
          <span class="li">{{item.goodsName}} 等{{item.goodsNum}}件商品</span>
          <table class="firstcars">
            <tbody>
              <tr>
                <th>订餐人</th>
                <td>{{item.consumer}}</td>
                <th>手机号</th>
                <td>{{item.phone}}</td>
              </tr>
              <tr>
                <th>送餐地址</th>
                <td>{{item.delivery_address}}&nbsp;{{item.bed_no | capitalize}}床</td>
                <th>床位号</th>
                <td>{{item.bed_no | capitalize}}床</td>
                <th>住院号</th>
                <td>{{item.case_number}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="cardbox">
          <span>总金额</span>
          <span>￥{{item.total_amount}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      img1: require('../../../../static/images/Order4/MuslimRes_Icon.png'),
      img2: require('../../../../static/images/Order4/NutritionalRes_Icon.png')
    }
  },
  methods: {
  },
  props: ['mainList'],
  filters: {
    capitalize: function (value) {
      value = value.substring(4)
      return value
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../static/css/color.styl';

.cardsheight {
  max-height: 9.8rem;
  overflow-y: auto;
}

.cardMuslim {
  height: 3rem;
  background-color: $color-white;
  border-radius: 0.2rem;
  margin-bottom: 0.25rem;
  margin: 0.2rem;

  .cardTitle {
    height: 0.85rem;
    background-color: $color-fa;
    padding: 0.2rem 0.6rem 0.2rem 0.2rem;
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;

    .cardbg {
      float: left;
      width: 0.46rem;
      height: 0.46rem;
      margin-right: 0.15rem;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    span {
      font-size: 0.3rem;
      color: $color-price;
      display: inline-block;
      line-height: 0.46rem;

      &:nth-of-type(2), &:nth-of-type(3) {
        color: $color-aaa;
        font-size: 0.26rem;
      }
    }

    p {
      float: right;
      font-size: 0.3rem;
      color: $color-red;
      line-height: 0.5rem;
    }
  }

  .cardMenu {
    width: 18.8rem;
    height: 2.15rem;
    padding: 0.35rem 0.4rem 0.35rem 0.8rem;

    .ul {
      height: 1.85rem;
      float: left;

      .li {
        font-size: 0.3rem;
        color: $color-price;
      }

      .firstcars {
        width: 13rem;
        height: 0.8rem;
        margin-top: 0.25rem;

        tr {
          font-size: 0.26rem;
          color: $color-aaa;
          height: 0.45rem;
        }

        th {
          font-weight: normal;
        }
      }
    }
  }

  .cardbox {
    float: right;

    span {
      font-size: 0.3rem;
      color: $color-orange;
      margin-right: 0.2rem;
    }
  }
}
</style>
